<template>
  <BaseModal ref="modalRef" @on-modal-cancel="modalCancel" @on-modal-ok="modalOK">
    <template #titleArea>添加快捷操作 </template>
    <template #contentArea>
      <div class="flex">
        <div class="contents-list">
          <div class="layout-checklist__title"><span>可选快捷操作</span></div>
          <a-input-search v-model:value="searchValue" placeholder="搜索快捷操作..." style="padding: 10px 0" @search="onSearch" />
          <ul class="layout-checklist-list">
            <li class="layout-checklist-item">
              <a-checkbox-group v-model:value="value4">
                <a-checkbox v-for="(item,index) in (optionsWithDisabled as Array)" :key="item.id" :value="item.value" :disabled="item.isDisabled" @change="onCheckChange(index)">
                  <component :is="item.icon"></component>
                  {{ item.label }}
                </a-checkbox>
              </a-checkbox-group>
            </li>
          </ul>
        </div>
        <div class="contents-checked">
          <div class="layout-checklist__title"><span>已选择的快捷操作</span><span class="layout-checklist__title_span">(共0个)</span></div>
          <ul class="layout-checklist-list">
            <li v-for="item in (optionsWithDisabled as Array)" :key="item.id" class="layout-checklist-item">
              <p v-if="item.isCheck == true">
                <component :is="item.icon"></component>
                {{ item.label }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </template>
  </BaseModal>
</template>

<script setup lang="ts">
import BaseModal from "@/components/Basics/BaseModal.vue"
import { Ref } from "vue"
const prop = defineProps({
  iconList: { type: Array, required: true },
  arrBtnList: { type: Array, required: true },
})
console.log(prop.arrBtnList)
const modalRef = ref()
const showModal = (): void => {
  modalRef.value.setOpen()
}
const modalOK = () => {
  console.log(optionsWithDisabled.value)
  modalRef.value.setCloes()
}
const modalCancel = () => {
  modalRef.value.setCloes()
}
const optionsWithDisabled: Ref<any[]> = ref(prop.btnList)

const value4 = ref(prop.arrBtnList)
const searchValue = ref("")
const onSearch = () => {
  console.log(1)
}
const onCheckChange = (index: any) => {
  optionsWithDisabled.value[index].isCheck = !optionsWithDisabled.value[index].isCheck
  optionsWithDisabled.value[index].isShow = !optionsWithDisabled.value[index].isShow
}
defineExpose({
  showModal,
})
onMounted(() => {
  // console.log(prop.btnList)
})
</script>
<style scoped lang="less">
.contents-list {
  flex: 1 1 50%;
  padding: 0 10px;
  border-right: 1px solid #e8e8e8;
  .layout-checklist__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
  }
  .layout-checklist-list {
    // overflow-y: scroll;
    max-height: 40vh;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
.contents-checked {
  flex: 1 1 50%;
  padding: 0px 10px;
  .layout-checklist__title {
    .layout-checklist__title_span {
      color: #909090;
    }
  }
  .layout-checklist-list {
    // overflow-y: scroll;
    max-height: 40vh;

    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>
<style scoped>
:deep(.ant-checkbox-wrapper) {
  display: flex;
  margin-left: 0;
}
</style>
